<template>
    <div class="main">
    <el-tabs type="border-card">
    <el-tab-pane>
    <span slot="label" class="labelcolor">我的工地</span>
        <el-row style="margin:20px;">
            <el-link :underline="false" type="primary" style="font-size:20px;font-weight: bold;color:#409EFF;">新增工地收货地址</el-link>
        </el-row>
        <el-row>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="选择工地" prop="region">
                <el-select v-model="value" placeholder="请选择工地" class="forminput">
                    <el-option
                    v-for="item in sites"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择地址">
                <el-cascader
                    :options="options"
                    placeholder="请选择地址（省、市、区）"
                    change-on-select
                    filterable
                    @change="handleChange">
                </el-cascader>
            </el-form-item>
            <el-form-item label="">
                <baidu-map class="bm-view" ak="DD279b2a90afdf0ae7a3796787a0742e" style="display: flex; flex-direction: column" center="北京">
                    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
                    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
                    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                </baidu-map>
            </el-form-item>
             <el-form-item label="详细地址">
                <el-input class="forminput"></el-input>
            </el-form-item>
             <el-form-item label="收料员姓名">
                <el-input class="forminput"></el-input>
            </el-form-item>
             <el-form-item label="收料员电话">
                <el-input class="forminput"></el-input>
            </el-form-item>
             <el-form-item label="收料员2姓名">
                <el-input class="forminput"></el-input>
            </el-form-item>
             <el-form-item label="收料员2电话">
                <el-input class="forminput"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="remerber" @click="submitForm('ruleForm')" style="margin:0 35%;">保存</el-button>
            </el-form-item>
            </el-form>
        </el-row>
        <el-row style="margin:20px;">
            <el-link :underline="false" type="primary" style="font-size:20px;font-weight: bold;color:#409EFF;">您共有两个收货地址：</el-link>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    border
                    style="width: 75%;margin:0 7%;">
                    <el-table-column
                    prop="sitename"
                    label="工地名称"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="详细地址"
                    width="350">
                    </el-table-column>
                    <el-table-column
                    prop="inform1name"
                    label="收料员1姓名"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="inform1phone"
                    label="收料员1电话"
                    width="130">
                    </el-table-column>
                    <el-table-column
                    prop="inform2name"
                    label="收料员2姓名"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="inform2phone"
                    label="收料员2电话"
                    width="130">
                    </el-table-column>
                   <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    </template>
                    </el-table-column>
                </el-table>
        </el-row>
    </el-tab-pane>
    </el-tabs>
    </div>
</template>
<script>
import axios from "axios";
import cities from '@/assets/common/cities.js' // 引入城市数
import { BaiduMap,BmNavigation, BmGeolocation,BmCityList} from 'vue-baidu-map'

export default {
   data() {
      return {
        options:cities,
        sites: [{
        value:'A',
          label: '旭辉运河悦章'
        }, {
        value:'B',
          label: '大江大河'
        }],
        value: '',
        tableData: [{
            sitename:'旭辉运河悦章',
            address:'浙江省杭州市联合大厦B座',
            inform1name:'张三',
            inform1phone:'13157188735',
            inform2name:'张三',
            inform2phone:'13157188735'
        },
        {
            sitename:'旭辉运河悦章',
            address:'浙江省杭州市联合大厦B座',
            inform1name:'张三',
            inform1phone:'13157188735',
            inform2name:'张三',
            inform2phone:'13157188735'
        },
        {
            sitename:'旭辉运河悦章',
            address:'浙江省杭州市联合大厦B座',
            inform1name:'张三',
            inform1phone:'13157188735',
            inform2name:'张三',
            inform2phone:'13157188735'
        },
        {
            sitename:'旭辉运河悦章',
            address:'浙江省杭州市联合大厦B座',
            inform1name:'张三',
            inform1phone:'13157188735',
            inform2name:'张三',
            inform2phone:'13157188735'
        }]
      }
    },
    components: {
    BaiduMap,
    BmNavigation,
    BmGeolocation,
    BmCityList,
    errInfo:"",
    errorInfo:false
  },
  created() {  
      //获取集群列表
      var self=this
      var dataa={account:sessionStorage.getItem("ms_account")}
      axios.post('/api/site/show',JSON.stringify(dataa))
      .then(res=>{
        if (res.data == -1) {
            self.errorInfo = true;
            self.errInfo = 'no such user';
            console.log('Invalid username.')
        } else if (res.status == 200) {
            this.tableData=res.data
            alert(this.tableData[0].sitename)
        }
      })    
    },
    methods: {
        handleEdit(index, row) {
        console.log(index, row);
      },
      submitForm(val){
          alert(val)
      }
    }
}
</script>
<style src="../style/mine.css">
</style>